<template>
  <div class="container">
    <!-- 侧边按钮 -->
    <div class="btns">
      <el-timeline>
        <!-- 职位发布 -->
        <el-timeline-item color="rgb(165, 196, 222)">
          <el-button type="primary" @click="selectTab(title.JobPublish)"
            >职位发布</el-button
          >
        </el-timeline-item>
        <!-- 简历筛选 -->
        <el-timeline-item color="rgb(165, 196, 222)">
          <el-button type="primary" @click="selectTab(title.FilterResume)"
            >简历筛选</el-button
          >
        </el-timeline-item>
        <!-- 面试 -->
        <el-timeline-item color="rgb(165, 196, 222)">
          <el-button type="primary" @click="selectTab(title.Interview)"
            >面试</el-button
          >
        </el-timeline-item>
        <!-- 录用 -->
        <el-timeline-item color="rgb(165, 196, 222)">
          <el-button type="primary" @click="selectTab(title.PeopleHire)"
            >录用</el-button
          >
        </el-timeline-item>
      </el-timeline>
    </div>

    <!-- 招聘发布内容 -->
    <div class="info">
      <el-card style="display: flex; flex-direction: column" shadow="hover">
        <template #header>
          <div
            class="card-header"
            style="display: flex; justify-content: center"
          >
            <span style="font-size: large; font-weight: 700; color: white">{{
              currentTab
            }}</span>
          </div>
        </template>
        <!-- :dataCheck="pagination.dataCheck" -->
        <component
          :is="currentComponent"
          :dataCheck="pagination.dataCheck"
          :dataAll="pagination.dataAll"
          :visibleDrawerHire="visibleDrawerHire"
          @update:jobData="updateJob"
        />

        <template #footer>
          <pagi-nation
            :total="pagination.total"
            :allData="pagination.dataAll"
            @update:Data="updateHire"
          ></pagi-nation>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import JobPublish from './components/JobPublish.vue'
import FilterResume from './components/FilterResume.vue'
import Interview from './components/Interview.vue'
import PeopleHire from './components/PeopleHire.vue'
import { useHireStore } from '@/stores'

// 获取招聘hire实例
const hireStore = useHireStore()
// 招聘的所有信息
const jobsData = reactive({
  recruit: [],
  total: 0
})
//接收简历--面试--录用所有信息
const resumeData = reactive({
  resume: [],
  total: 0
})
//简历的所有信息
const resumeDatas = reactive({
  resume: [],
  total: 0
})

// 面试的所有信息
const interviewData = reactive({
  interview: [],
  total: 0
})

// 录用的所有信息
const hireData = reactive({
  hire: [],
  total: 0
})

onMounted(async () => {
  await hireStore.fetchJobAll()
  Object.assign(jobsData, hireStore.jobsData)
  pagination.total = jobsData.total
  pagination.dataAll = jobsData.recruit

  // await updateHire()
})
const currentTab = ref('招聘岗位') //卡片头部信息
const currentComponent = ref(JobPublish) //当前组件

const title = ref({
  JobPublish: '招聘岗位',
  FilterResume: '简历筛选',
  Interview: '面试中',
  PeopleHire: '录用人员'
})
const components = {
  JobPublish: JobPublish,
  FilterResume: FilterResume,
  Interview: Interview,
  PeopleHire: PeopleHire
}

//点击侧边按钮--显示相应的内容
const selectTab = async (tabName) => {
  const tabKey = Object.keys(title.value).find(
    (key) => title.value[key] === tabName
  )
  if (tabKey) {
    currentTab.value = title.value[tabKey]
    currentComponent.value = components[tabKey]

    // 根据tab更新分页数据
    await updatePagination(tabKey)
    // await updateHire()
    visibleDrawerHire.value = true
  }
}
//分页数据
const pagination = reactive({
  // 初始化，默认招聘页面
  total: 0,
  dataAll: [],
  dataCheck: []
})
const updatePagination = async (tab) => {
  // 这里应该根据tab获取相应的分页数据
  // 例如：
  if (tab === 'JobPublish') {
    // ... 更新分页数据--岗位
    await hireStore.fetchJobAll()
    Object.assign(jobsData, hireStore.jobsData)
    pagination.total = jobsData.total
    pagination.dataAll = jobsData.recruit
    // visibleDrawerHire.value = false
  } else if (tab === 'FilterResume') {
    // ... 更新分页数据--简历
    await hireStore.fetchResumeAll()
    Object.assign(resumeData, hireStore.resumeData)
    resumeDatas.resume = resumeData.resume.filter(
      (resume) => resume.iflag != 1 && resume.eflag != 1
    )
    pagination.total = resumeDatas.resume.length
    pagination.dataAll = resumeDatas.resume
    console.log(resumeData, 'resumeData简历')
  } else if (tab === 'Interview') {
    // ... 更新分页数据--面试
    await hireStore.fetchResumeAll()
    Object.assign(resumeData, hireStore.resumeData)
    interviewData.interview = resumeData.resume.filter(
      (resume) => resume.fflag === 1 && resume.eflag != 1
    )
    interviewData.total = interviewData.interview.length
    pagination.total = interviewData.total
    pagination.dataAll = interviewData.interview
  } else if (tab === 'PeopleHire') {
    // ... 更新分页数据 -- 录用

    await hireStore.fetchResumeAll()
    Object.assign(resumeData, hireStore.resumeData)
    hireData.hire = resumeData.resume.filter(
      (resume) => resume.fflag === 1 && resume.iflag === 1
    )
    hireData.total = hireData.hire.length
    // console.log(hireData, 'hireData')

    pagination.total = hireData.total
    pagination.dataAll = hireData.hire
  }
}

// 分页条函数
const updateHire = (newData) => {
  if (newData) {
    pagination.dataCheck = newData
    // console.log(pagination.dataCheck, '框架数据')
  }

  visibleDrawerHire.value = false
}
// 主体内容--职位岗位函数
const updateJob = async (updataInfo) => {
  console.log(updataInfo, 'updataInfo')
  if (updataInfo) {
    await hireStore.fetchJobAll()
    Object.assign(jobsData, hireStore.jobsData)
    pagination.total = jobsData.total
    pagination.dataAll = jobsData.recruit
    await updateHire()
  }
}

//职位发布显示
const visibleDrawerHire = ref(false)
</script>

<style lang="less" scoped>
.container {
  display: flex;
  align-items: stretch;
}

.btns {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 30px; /* 与右侧卡片的间距 */
  .el-timeline {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .el-timeline-item {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      height: 100%;
    }
  }
}

.info {
  flex-grow: 1; /* 使卡片占据剩余空间 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;

  .el-card {
    width: 75%;
    max-width: 1200px; /* 最大宽度 */
    display: flex;
    flex-direction: column;
    background-color: #a5c4de;
    border-radius: 8px; /* 圆角 */

    .el-card__body {
      width: 100%;
    }
  }
}
</style>
